<template>
	<view class="container tui-page__bd">
		<image class="tui-banner__img" :src="webURL+'img_banner_github.gif'" mode="widthFix"></image>
		<view class="tui-main__box">
			<view class="tui-star__www" data-index="0" @tap.stop="copyLink">
				<image class="tui-www__img" :src="webURL+'img_www_link.png'" mode="widthFix"></image>
				<tui-copy-text value="官网地址" :copyText="links[0]" color="#fff"></tui-copy-text>
			</view>

			<view class="tui-star__doc thorui-flex__center" data-index="1" @tap.stop="copyLink">
				<view class="tui-link__box tui-bg__1">
					<image class="tui-link__img" :src="webURL+'img_doc_link.png'" mode="widthFix"></image>
				</view>
				<view class="tui-link__title">
					<tui-copy-text value="使用文档地址" :copyText="links[1]" color="#152338"></tui-copy-text>
				</view>
			</view>
			<view class="tui-uni__github thorui-flex__center" data-index="2" @tap.stop="copyLink">
				<view class="tui-link__box tui-bg__2">
					<image class="tui-link__img" :src="webURL+'img_github_link.png'" mode="widthFix"></image>
				</view>
				<view class="tui-link__title">
					<tui-copy-text value="uni-app版本GitHub地址" :copyText="links[2]" color="#152338"></tui-copy-text>
				</view>
			</view>
			<view class="tui-uni__plugin thorui-flex__center" data-index="3" @tap.stop="copyLink">
				<view class="tui-link__box tui-bg__3">
					<image class="tui-link__img" :src="webURL+'img_plugin_link.png'" mode="widthFix"></image>
				</view>
				<view class="tui-link__title">
					<tui-copy-text value="uni-app版本插件市场地址" :copyText="links[3]" color="#152338"></tui-copy-text>
				</view>
			</view>
			<view class="tui-wechat__github thorui-flex__center" data-index="4" @tap.stop="copyLink">
				<view class="tui-link__box tui-bg__4">
					<image class="tui-link__img" :src="webURL+'img_github_link.png'" mode="widthFix"></image>
				</view>
				<view class="tui-link__title">
					<tui-copy-text value="小程序版本GitHub地址" :copyText="links[4]" color="#152338"></tui-copy-text>
				</view>
			</view>
			<view class="tui-wechat__plugin thorui-flex__center" data-index="5" @tap.stop="copyLink">
				<view class="tui-link__box tui-bg__5">
					<image class="tui-link__img" :src="webURL+'img_plugin_link.png'" mode="widthFix"></image>
				</view>
				<view class="tui-link__title">
					<tui-copy-text value="小程序版本插件市场地址" :copyText="links[5]" color="#152338"></tui-copy-text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import thorui from '@/components/common/tui-clipboard/tui-clipboard.js'
	export default {
		data() {
			return {
				webURL: 'https://www.thorui.cn/extend/github/',
				index: 0,
				links: [
					'https://thorui.cn/',
					'https://thorui.cn/doc/',
					'https://github.com/dingyong0214/ThorUI-uniapp',
					'https://ext.dcloud.net.cn/plugin?id=556',
					'https://github.com/dingyong0214/ThorUI',
					'https://ext.dcloud.net.cn/plugin?id=569'
				]
			}
		},
		methods: {
			copyLink(e) {
				this.index = Number(e.currentTarget.dataset.index)
				this.tui.modal('开源地址', this.links[this.index], true, (res) => {
					if (res) {
						this.copy(e)
					}
				}, '', '复制链接')
			},
			copy(e) {
				thorui.getClipboardData(this.links[this.index], res => {
					if (res) {
						this.tui.toast('复制成功');
					}
				}, e);
			}
		},
		onShareAppMessage: function(e) {
			return {
				title: 'ThorUI开源地址'
			};
		}
	}
</script>

<style>
	.tui-banner__img {
		width: 100%;
		height: 416.667rpx;
	}

	.tui-main__box {
		width: 660rpx;
		height: 660rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		position: relative;
		left: -60rpx;
		top: 60rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.tui-main__box::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		border: 1rpx solid #EAEAEA;
		border-radius: 50%;
		left: -170rpx;
		top: 0;
		pointer-events: none;
	}

	.tui-star__www {
		width: 320rpx;
		height: 320rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background: linear-gradient(to right, #5677fc, #5c8dff, #5677fc);
		border-radius: 50%;
		position: relative;
		flex-shrink: 0;
	}

	.tui-star__www::after {
		content: '';
		position: absolute;
		width: 112%;
		height: 112%;
		border-radius: 50%;
		background-color: rgba(86, 119, 252, .1);
		left: -6%;
		top: -6%;

	}

	.tui-www__img {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 12rpx;
	}

	.tui-link__box {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-bg__1 {
		background: linear-gradient(to bottom, #FFB982, #FFAF86);
		box-shadow: 4rpx 4rpx 20rpx rgba(255, 175, 134, .4);
	}

	.tui-bg__2 {
		background: linear-gradient(to bottom, #8A99C5, #668ABF);
		box-shadow: 4rpx 4rpx 20rpx rgba(102, 138, 191, .4);
	}

	.tui-bg__3 {
		background: linear-gradient(to bottom, #10C5B5, #54A0B3);
		box-shadow: 4rpx 4rpx 20rpx rgba(84, 160, 179, .4);
	}

	.tui-bg__4 {
		background: linear-gradient(to bottom, #F97D72, #FF8B6C);
		box-shadow: 4rpx 4rpx 20rpx rgba(255, 139, 108, .4);
	}

	.tui-bg__5 {
		background: linear-gradient(to bottom, #CE81E8, #DD7BF3);
		box-shadow: 4rpx 4rpx 20rpx rgba(221, 123, 243, .4);
	}

	.tui-link__img {
		width: 44rpx;
		height: 44rpx;
	}

	.tui-link__title {
		width: 188rpx;
		position: absolute;
		left: 120rpx;
		top: 50%;
		transform: translateY(-50%);
		flex-direction: 0;
	}

	.thorui-flex__center {
		flex-shrink: 0;
		position: absolute;
		z-index: 10;
	}

	.tui-star__doc {
		top: 0;
		right: 300rpx;
	}

	.tui-uni__github {
		top: 130rpx;
		right: 170rpx;
	}

	.tui-uni__plugin {
		top: 290rpx;
		right: 124rpx;
	}

	.tui-wechat__github {
		top: 450rpx;
		right: 170rpx;
	}

	.tui-wechat__plugin {
		top: 570rpx;
		right: 300rpx;
	}
</style>
